<template>
  <div class="base-table">
    <div ref="tableRef" class="table">
      <el-table
        v-loading="loading"
        :data="data">

        <template #empty>
          <div class="empty-cont">
            <div class="empty-bg"></div>
            <div class="empty-label">暂无数据</div>
          </div>
        </template>

        <el-table-column
          v-for="column in columns"
          v-bind="column.props"
          :show-overflow-tooltip="false"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth || 156"
          :align="column.align || 'center'"
          :fixed="column.prop === 'operate' ? 'right' : column.fixed"
          :type="column.type"
          :sortable="column.sortable">
          <template v-if="!column.type" #default="scope">
            <slot :name="column.prop" :scope="scope.row" :index="scope.$index">
              <div v-if="column.prop === 'operate'" class="btn-group">
                <el-button
                  link
                  v-for="btn,j in column.buttons" :key="j"
                  v-bind="btn.props"
                  :size="btn.small || 'small'"
                  :type="btn.type || 'primary'"
                  @click="btn.handle(scope.row, scope.$index)">
                  {{ btn.label }}
                </el-button>
              </div>
              <span v-else>{{ column.format ? column.format(scope.row) : scope.row[column.prop] }}</span>
            </slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-wrap" v-if="total">
      <div class="total">
        总共 {{ total }} 条记录
        <!-- , 共{{ Math.ceil(total / pageSize) || 0 }}页 -->
      </div>
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
        class="page-con"
        @size-change="sizeChange"
        @current-change="currentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import tableHeadBg from '@/assets/images/table-head-bg.jpg'

const emit = defineEmits([
  'update:modelValue',
  'confirm',
  'pagination'
])
const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  data: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  total: {
    type: Number,
    default: 0,
  },
  pageNum: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  layout: {
    type: String,
    // default: "prev, pager, next, sizes, jumper"
    default: "prev, pager, next, sizes"
  }
})

const sizeChange = (val) => {
  console.log('sizeChange', val)
  emit('pagination', val)
}
const currentChange = (val) => {
  console.log('currentChange', val)
  emit('pagination', val)
}
</script>

<style scoped lang="scss">
.pagination-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 0;
  font-size: 14px;
}

.btn-group {
  :deep(.el-button) {
    margin: 0 6px;
  }
}
</style>